<template>
  <view>
    <u-navbar :placeholder="true" @leftClick="leftClick" v-if="!isHideTabbar">
      <template #left>
        <u-icon name="home" size="20" v-if="shareFlag"></u-icon>
        <u-icon name="arrow-left" size="20" v-else></u-icon>
      </template>
      <template #center>
        <view></view>
      </template>
    </u-navbar>
    <!-- 商品详情 -->
    <!-- @fullscreenchange -->
    <!-- :indicator-dots="true" -->
    <swiper class="swiper" circular :autoplay="swiperAutoPlayState" :interval="3000" :duration="500" @change="e => (swiperIndex = e.detail.current)">
      <swiper-item v-for="(item, index) in details.goods_image" :key="index">
        <VideoImg
          :url="item"
          :imgVideoStyle="imgVideoStyle"
          @fullscreenchangeHandler="fullscreenchangeHandler"
          @playSwiperVideoEmitHandler="swiperAutoPlayState = false"
          @pauseSwiperVideoEmitHandler="swiperAutoPlayState = true"
          @endedSwiperVideoEmitHandler="swiperAutoPlayState = true"
        />
      </swiper-item>
    </swiper>
    <view class="swiperDotBox">
      <view v-for="(item, index) in details.goods_image" class="swiperDot" :class="swiperIndex === index && 'curDot'"></view>
    </view>
    <!-- <u-swiper :list="details.goods_image" indicator indicatorMode="line" circular height="375"></u-swiper> -->
    <view class="cardList">
      <view class="priceBox card">
        <view class="priceBox-price">
          <template v-if="details.price">
            <text style="font-size: 26rpx">¥</text>
            <text>{{ details.price }}</text>
          </template>

          <template v-if="typeState === 1 || typeState === 4">
            <text style="font-size: 22rpx; color: #806efe" v-if="details.pay_num">{{ details.pay_num }}人+已付款</text>
          </template>

          <template v-if="typeState === 3">
            <image class="tab" src="http://qiniu.suboshimuying.cn/static/details/Group.png" mode=""></image>
            <text style="color: rgba(0, 0, 0, 0.4); font-size: 22rpx">市场价值:¥{{ details.order_price }}</text>
          </template>
        </view>
        <template v-if="typeState === 1">
          <view style="color: rgba(0, 0, 0, 0.4); font-size: 22rpx">
            <text v-if="details.mb_price">某宝参考价:¥{{ details.mb_price }}</text>
            &nbsp;&nbsp;
            <text v-if="details.md_price">某东参考价:¥{{ details.md_price }}</text>
          </view>
        </template>

        <view class="priceBox-title" v-if="details.name">
          {{ details.name }}
        </view>
      </view>

      <template v-if="typeState === 3">
        <view class="areaBox card">
          <view>门店地址</view>
          <view class="areaBox-area">{{ details.adress_det }}</view>
        </view>
      </template>

      <template v-if="typeState === 2">
        <view class="card">
          <view class="areaBox" style="margin-bottom: 15rpx">
            <view>上门服务</view>
            <view class="areaBox-area">{{ details.call_pel }}</view>
          </view>
          <view class="areaBox" style="padding-top: 15rpx; border-top: 1rpx solid #f4f4f4">
            <view>到店服务</view>
            <view class="areaBox-area">{{ details.adress_det }}</view>
          </view>
        </view>
      </template>

      <!-- 评论 -->
      <!-- <template v-if="messGoods.hasOwnProperty('com_text')"> -->
      <template v-if="messGoods.length">
        <view class="commentCard card">
          <view class="commentCard-title" @click="toUrl(`/subPages/commentDetails/commentDetails?id=${id}`)">
            <text>买家评论</text>
            <view style="color: #806efe; font-size: 24rpx">
              <text>全部</text>
              <image class="arrowright" src="http://qiniu.suboshimuying.cn/static/order/Frame 2630@2x.png" mode=""></image>
            </view>
          </view>
          <view class="commentCard-center" v-for="pitem in messGoods">
            <view class="user">
              <image class="picture" :src="pitem.user.avatar" mode=""></image>
              <view class="userRight">
                <view class="u-line-1" style="margin-left: 4rpx">{{ pitem.user.nickname }}</view>
                <u-rate :value="pitem.com_level" active-color="#FFC729" inactive-color="#F0F2F5" allowHalf readonly></u-rate>
              </view>
            </view>
            <view class="comment u-line-2">
              {{ pitem.com_text }}
            </view>

            <template v-if="pitem.com_images.length">
              <view class="commentCard-below">
                <VideoImg :url="item" v-for="item in pitem.com_images.slice(0, 3)" :key="item" />
              </view>
            </template>
            <template v-else>
              <view style="height: 20rpx"></view>
            </template>
          </view>
        </view>
      </template>
      <template v-else>
        <view class="card">暂无评论</view>
      </template>

      <view style="width: 442rpx; margin: auto">
        <u-divider text="商品详情"></u-divider>
      </view>
      <view class="card" style="color: #000; margin-top: 0">
        <u-parse :content="details.detail_text"></u-parse>
      </view>
    </view>
    <!-- <image class="thum_image" :src="details.mian_photo" mode=""></image> -->
    <!-- <view class="card" style="padding: 20rpx 0;margin-top: 0;">
			<u-parse :content="details.detail_text"></u-parse>
		</view> -->

    <view class="fixedBox">
      <button open-type="share" class="fixedBox-left">
        <image src="http://qiniu.suboshimuying.cn/static/details/ic-wechat@2x.png" mode=""></image>
        <view>分享</view>
      </button>

      <template v-if="typeState === 1 || typeState === 4">
        <view class="fixedBox-left" @click="fixdBtnClick(false)">
          <image src="../../static/tabbar/cart1.png" mode=""></image>
          <view>加入购物车</view>
        </view>
      </template>

      <view class="fixedBox-right" @click="fixdBtnClick(true)">立即购买</view>
    </view>
    <!-- 下单弹出层 -->
    <PlacePopup :details="details" @popupBtnCallback="popupCallback2" :btnType="btnType" @popupClose="popupShow2 = false" :showFlag="popupShow2" :type="typeState" />

    <MessageBox :showFlag="popupShow3" title="您当前还没填写预产期哦~" text="1" @popupClose=";(popupShow3 = false), (showDueDateState = false)" @MesBoxCallback="confirmFillOutHandler" :isBtn2="false">
      <template #selectTimeSlot>
        <!-- <view class="selectTimeBox" @click="showDueDateState = true">{{ dueData==='点击选择预产期' ? '点击选择预产期': `${dueData.split('-')[0]}年${dueData.split('-')[1]}月${dueData.split('-')[2]}日` }}</view> -->
        <view class="selectTimeBox" @click="showDueDateState = true">{{ dueData }}</view>
      </template>
    </MessageBox>

    <u-datetime-picker :show="showDueDateState" v-model="dueDateValue" mode="date" @cancel="showDueDateState = false" @confirm="confirmDueDateHandler"></u-datetime-picker>
  </view>
</template>

<script>
import dayjs from 'dayjs'
import PlacePopup from '@/components/PlacePopup/PlacePopup.vue'
import VideoImg from '@/components/VideoImg/VideoImg.vue'
import MessageBox from '@/components/MessageBox/MessageBox.vue'
export default {
  data() {
    return {
      typeState: 0, //专区状态
      id: null, //商品ID
      details: {}, //商品详情
      commentData: {}, //评论
      popupShow2: false,
      popupShow3: false,
      btnType: true,
      messGoods: [], //评论
      shareFlag: false,
      imgVideoStyle: 'detail',
      isHideTabbar: false, // tabbar 状态
      swiperAutoPlayState: true, // swiper 是否自动轮播
      swiperIndex: 0,
      dueDateValue: Number(new Date()),
      showDueDateState: false,
      dueData: '请点击这里选择预产期'
    }
  },
  components: {
    PlacePopup,
    VideoImg
  },
  onLoad(option) {
    // 区分分享进入和正常进入
    if (option.fxuserId) {
      // 区分自己进入和别人进入
      this.shareFlag = true
      if (option.fxuserId != uni.getStorageSync('userId')) {
        // uni.setStorage()
        uni.setStorageSync('fxuserId', option.fxuserId)
        uni.setStorageSync('pid', option.fxuserId)
				if(!uni.getStorageSync('token')) uni.navigateTo({ url:'/subPages/login/login' })
      }
    } else {
      this.shareFlag = false
    }
    // 一级分类id 1:热卖 2:本地服务 3:薅羊毛 4:镇店之宝
    this.typeState = Number(option.type)
    this.id = option.id
    console.log(option)
  },
  onShow() {
    this.getGoodDetails() //商品详情
    this.getMessGoods() //获取评论
  },
  // 分享好友
  onShareAppMessage(res) {
    return {
      //type 一级分类id 1:热卖 2:本地服务 3:薅羊毛 4:镇店之宝
      // id:商品ID
      title: '祝君来卡', // 标题
      path: `/subPages/goodDetails/goodDetails?fxuserId=${uni.getStorageSync('userId')}&type=${this.details.one_category_id}&id=${this.details.id}`, // 分享路径
      imageUrl: this.details.thum_image, // 分享图
      desc: this.details.name
    }
  },
  // 分享朋友圈
  onShareTimeline() {
    return {
      title: '祝君来卡', // 标题
      path: `/subPages/goodDetails/goodDetails?fxuserId=${uni.getStorageSync('userId')}&type=${this.details.one_category_id}&id=${this.details.id}`, // 分享路径
      imageUrl: this.details.thum_image // 分享图
    }
  },
  methods: {
    changeSwiperHandler(e) {
      console.log(e, 'swiper')
    },
    fullscreenchangeHandler() {
      this.$nextTick(() => {
        this.isHideTabbar = !this.isHideTabbar
      })
    },
    // 跳转
    toUrl(url) {
      uni.navigateTo({
        url
      })
    },
    // 导航栏点击
    leftClick() {
      if (this.shareFlag) {
        uni.switchTab({
          url: '/pages/index/index'
        })
      } else {
        uni.navigateBack()
      }
    },
    // 立即购买-加入购物车 回调
    popupCallback2(number) {
      // number:数量
      console.log(number)
      if (this.btnType) {
        // 下单事件
        uni.navigateTo({
          url: `/subPages/order/order?flag=${true}&type=${this.typeState}&id=${this.id}&num=${number}`
        })
        this.popupShow2 = false
        // console.log('下单事件');
      } else {
        // 加入购物车事件
        this.addCart(number)
        // console.log('加入购物车事件');
      }
    },
    // 立即购买点击
    async fixdBtnClick(type) {
      this.btnType = type
      const { data } = await this.$api.getuserinfo()
      if (!data.expect_time) return (this.popupShow3 = true)
      this.popupShow2 = true
    },
    // 确认选择预产期
    confirmDueDateHandler(e) {
      this.dueData = dayjs(e.value).format('YYYY-MM-DD')
      this.showDueDateState = false
    },
    // 确认填报预产期
    async confirmFillOutHandler() {
      this.showDueDateState = false
      if (this.dueData === '请点击这里选择预产期') return uni.showToast({ title: '请先选择预产时间', icon: 'none' })
      const targetDate = dayjs(this.dueData)
      const today = dayjs()
      const diffInDays = targetDate.diff(today, 'day')
      console.log(diffInDays) // 输出结果为数字，表示距离今天还有多少天
      if (diffInDays > 310) return uni.showToast({ title: '不可选择大于十个月以上的时间哦~', icon: 'none' })
      try {
        await this.$api.expectDate({ expect_time: this.dueData })
        this.popupShow3 = false
        this.popupShow2 = true
        uni.showToast({ title: '录入成功~', icon: 'none' })
      } catch (error) {
        console.log(error, '录入预产期失败')
        this.popupShow3 = false
      }
    },
    // 加入购物车
    async addCart(num) {
      let { code, msg } = await this.$api.addCart({
        goods_id: this.id,
        num
      })
      this.$u.toast(msg)
      if (code === 1) {
        setTimeout(() => {
          this.popupShow2 = false
        }, 1500)
      }
      // console.log(res);
    },
    // 商品详情
    async getGoodDetails() {
      let res = await this.$api.getGoodDetails({
        id: this.id
      })
      this.details = res.data
      // console.log(res);
    },
    // 获取评论
    async getMessGoods() {
      let res = await this.$api.getMessGoods({
        id: this.id,
        page: 1,
        total: 5
      })
      this.messGoods = res.data.data
    }
  }
}
</script>

<style>
page {
  box-sizing: border-box;
  padding-bottom: 230rpx;
}

button {
  background-color: #fff;
}

button::after {
  border: none;
}

.button-hover {
  background: #fff;
}
</style>

<style lang="scss" scoped>
.swiper-item {
  display: block;
  line-height: 300rpx;
  width: 100%;
  height: 100%;
  text-align: center;
}
.swiper {
  height: 750rpx;
}
.swiperDotBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -30rpx;
  z-index: 10099 !important;

  .swiperDot {
    margin: 0 6rpx;
    z-index: 10099 !important;
    width: 36rpx;
    height: 10rpx;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10rpx;
  }
}
.curDot {
  background-color: #fff !important;
}
.cardList {
  box-sizing: border-box;
  padding: 0 24rpx;
}

.priceBox {
  &-price {
    height: 64rpx;
    line-height: 64rpx;
    color: $priceText;
    font-size: 52rpx;
    font-weight: 500;
    font-family: 'PingFang SC';

    .tab {
      vertical-align: middle;
      width: 106rpx;
      height: 36rpx;
      margin-left: 10rpx;
    }
  }

  &-title {
    color: rgba(0, 0, 0, 0.9);
    font-size: 30rpx;
    font-weight: 500;
    line-height: 44rpx;
    letter-spacing: 0.6rpx;
  }
}

.areaBox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(0, 0, 0, 0.4);
  font-size: 26rpx;
  font-weight: 400;

  &-area {
    margin-left: 16rpx;
    flex: 1;
    color: #000;
  }
}

.commentCard {
  &-title {
    box-sizing: border-box;
    padding-bottom: 22rpx;
    border-bottom: 1rpx solid #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(0, 0, 0, 0.8);
    font-size: 28rpx;
    font-weight: 500;
    text-align: left;

    .arrowright {
      margin-left: 10rpx;
      vertical-align: middle;
      width: 24rpx;
      height: 24rpx;
    }
  }

  &-center {
    margin-top: 12rpx;

    .user {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(0, 0, 0, 0.55);
      font-size: 26rpx;
      font-weight: 400;

      .picture {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 16rpx;
      }

      .userRight {
        flex: 1;
      }
    }

    .comment {
      margin-top: 16rpx;
      // height: 80rpx;
    }
  }
}

.commentCard-below {
  margin-top: 16rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 210rpx;

  image {
    width: 210rpx;
    height: 210rpx;
    border-radius: 16rpx;
  }
}
.fixedBox {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 188rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 32rpx 68rpx;

  &-left {
    margin-right: 24rpx;
    color: rgba(0, 0, 0, 0.8);
    font-size: 22rpx;
    font-weight: 400;
    text-align: center;

    image {
      width: 48rpx;
      height: 48rpx;
      vertical-align: middle;
    }
  }

  &-right {
    flex: 1;

    height: 88rpx;
    line-height: 88rpx;
    color: #fff;
    border-radius: 600rpx;
    opacity: 1;
    background: linear-gradient(131.2deg, rgba(179, 142, 255, 1) 0%, rgba(130, 111, 255, 1) 100%);
    text-align: center;
  }
}
.selectTimeBox {
  margin: 60rpx auto 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: 700;
  color: rgb(249, 106, 106);
  border: 1rpx solid rgba(0, 0, 0, 0.2);
  padding: 20rpx;
}
.thum_image {
  width: 100%;
  margin-top: 12rpx;
}
</style>
